import React, { useState ,useContext,forwardRef,useImperativeHandle,useMemo, useEffect} from 'react';
import {useLocation,useNavigate,Outlet} from 'react-router-dom'
import { Card, Space , Button ,Flex,Modal } from 'antd';
import axios from 'axios'
import ycon from '../Mycontext.tsx'
import MyMethods from '../Mymethods.tsx'
interface ListItem {
    id: number;
    name: string;
    sex: string;
    age: number;
    num: string;
    time: string;
    restate: boolean;
    tag: string[];
    state: number;
}

const box = {
    width: '280px',
    height:'250px',
};
let btn = {
    width:'90%',
    height:'28px',
    margin:'auto'
}
let btn1 = {
    fontSize:'10px',
    padding:'5px 10px',
    border:'1.2px solid blue',
    borderRadius:'5px',
    color:'blue'
}
let btn2 = {
    fontSize:'10px',
    padding:'5px 10px',
    border:'1.2px solid green',
    borderRadius:'5px',
    color:'green'
}
let btn3 = {
    fontSize:'10px',
    padding:'5px 10px',
    border:'1.2px solid gray',
    borderRadius:'5px',
    color:'gray'
}
let boxtop = {
    width:'100%',
    height:'50px',
    // border:'1px solid gray',
    borderRadius:'5px',
}
let boxmidd = {
    width:'100%',
    height:'60px',
    // border:'1px solid gray',
    borderRadius:'5px',
}
let boxmidd2 = {
    width:'100%',
    height:'30px',
    // border:'1px solid gray',
    borderRadius:'5px',
}
let boxbott = {
    width:'100%',
    height:'40px',
    // border:'1px solid gray',
    borderRadius:'5px',
}
let tag1 = {
    width:'40px',
    height:'20px',
    border:'1px solid blue',
    borderRadius:'5px',
    textAlign:'center',
    lineHeight:'20px',
    color:'blue'
}
let tag2 = {
    width:'40px',
    height:'20px',
    border:'1px solid red',
    borderRadius:'5px',
    textAlign:'center',
    lineHeight:'20px',
    color:'red'
}



const Cardbox = forwardRef((props,ref) => {
    // const { parentData } = useContext(ycon);//
    // const handleClick = () => {//
    //     setprd("子组件更新后的数据"); // 调用函数更新父组件数据
    //   };
    // const { prd, setprd }:any = useContext(ycon);//
    // const { parentMethod } = useContext(MyMethods);
    // const childMethod = () => {
    //     console.log('子组件的方法被调用');
    // };
    // useImperativeHandle(ref,()=>({
    //     childMethod
    // }))
    // const callParentMethod = () => {
    //     parentMethod();
    // };
    
    let [list,setlist] = useState<ListItem[]>([
        {
            'id':0,"name":"张晓晓","sex":"女","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','复诊'],"state":0
        },
        {
            'id':1,"name":"王一","sex":"男","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":0
        },
        {
            'id':2,"name":"李梅","sex":"女","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":0
        },
        {
            'id':3,"name":"张晓珂","sex":"男","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":0
        },
        {
            'id':4,"name":"刘克","sex":"男","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','复诊'],"state":0
        },
        {
            'id':5,"name":"赵明","sex":"男","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":1
        },
        {
            'id':6,"name":"孙桐","sex":"女","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":1
        },
        {
            'id':7,"name":"周洋","sex":"女","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":1
        },
        {
            'id':8,"name":"李雷","sex":"男","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":2
        },
        {
            'id':9,"name":"刘明","sex":"男","age":20,"num":'20250212',
            "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":2
        },
    ])
    // let getlist = async()=>{
    //     let {data:{lis}} = await axios.get('http://localhost:3000/why/mindex')
    //     setlist(lis)
    // }


    let gettag = (info:ListItem)=>{
        if(info.state == 0){
            return <div style={btn1}>未就诊</div>
        }else if(info.state == 1){
            return <div style={btn2}>已就诊</div>
        }else if(info.state == 2){
            return <div style={btn3}>已失效</div>
        }
        return <span>未知状态</span>;
    }

    const [isModalOpen, setIsModalOpen] = useState(false);
    let  navigate = useNavigate()
    const handleOk = () => {
        setIsModalOpen(false);
        navigate('/frame/studio/mere')
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const [index, setindex] = useState(false);
    let btngo = (info:string)=>{
        setIsModalOpen(true);
        setindex(info.name)
    }

    useEffect(()=>{
        // getlist()
    },[])
    
    return(  
        <>
                {
                    list.map((item,index)=>{
                        return (
                            <Card key={item.id} title={index+1+'号'} size='small' extra={gettag(item)} hoverable={true} style={box} >
                                <Flex justify='space-start' align='center' style={boxtop}>
                                    <span>{item.name}  {item.age}  {item.sex}</span>
                                    {/* <span>{prd}</span> */}
                                </Flex>
                                <Flex wrap vertical justify='space-start' align='space-around' style={boxmidd}>
                                    <span>门诊号：{item.num}</span>
                                    <span>就诊日期：{item.time}</span>
                                </Flex>
                                <Flex  justify='flex-start' align='center' style={boxmidd2}>
                                    {
                                        item.tag.map((tagitem,tagindex)=>{
                                            if(tagitem == '医保'){
                                                return (
                                                    <span key={tagindex} style={tag1}>医保</span>
                                                )
                                            }else if(tagitem == '初诊'){
                                                return (
                                                    <span key={tagindex} style={tag2}>初诊</span>
                                                )
                                            }else if(tagitem == '复诊'){
                                                return (
                                                    <span key={tagindex} style={tag2}>复诊</span>
                                                )
                                            }
                                        })
                                    }
                                </Flex>
                                    {
                                        item.tag.map((flooritem,floorindex)=>{
                                            if(flooritem == '初诊'){
                                                return (
                                                    <Flex justify='space-around' align='center' key={floorindex} style={boxbott}>
                                                        <Button type="primary" style={btn} onClick={()=>{btngo(item)}}>接诊</Button>
                                                    </Flex>
                                                )
                                            }else if(flooritem == '复诊'){
                                                return (
                                                    <Flex justify='space-around' align='center' key={floorindex} style={boxbott}>
                                                        <Button  style={btn} >查看病史</Button>
                                                        <Button type="primary" style={btn} onClick={()=>{btngo(item)}}>接诊</Button>
                                                    </Flex>
                                                )
                                            }
                                        })
                                    }
                            </Card>
                        )
                    })
                } 
                {/* <button onClick={handleClick}>更新父组件数据</button>// */}
                {/* <button onClick={callParentMethod}>调用父组件方法</button> */}
                <Modal  open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <p>是否继续接诊 （ {index} ） 患者，点击确认将开始接诊</p>
                </Modal>
        </>     
    )
});

export default Cardbox;